<template>
  <div class="try-wrapper">
    <div class="header">
      <img
        src="~assets/exam/happy_boy.png"
        class="boy"
      >
      <h3 class="title">
        您已免费试做{{ $store.state.instInfo.TryQuestionCount }}道题，登录后可继续做题！
      </h3>
    </div>
    <component
      :is="showLoginComponent"
      @chgComp="onChangeLoginComponent"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    LoginForm: () => import(/* webpackChunkName: "login" */ 'components/Login/LoginForm.vue'),
    RegisterForm: () => import(/* webpackChunkName: "register" */
      'components/Login/RegisterForm.vue'),
    RetrievePassword: () => import(/* webpackChunkName: "retrievePassword" */
      '@/views/Login/RetrievePassword.vue'),
  },
  data () {
    return {
      showLoginComponent: 'LoginForm',
    }
  },
  methods: {
    onChangeLoginComponent (comp: string) {
      this.showLoginComponent = comp
    },
  },
})
</script>

<style lang="scss" scoped>
.header {
  text-align: center;
  padding-bottom: 100px;
  margin-top: #{41px - $examHeaderInAPP};
}
.boy {
  display: block;
  width: 150px;
  margin: 0 auto;
}
.title {
  font-size: 30px;
  color: #333;
  margin-top: 19px;
}
.try-wrapper {
  /deep/ .form {
    padding-top: 0;
  }
}
</style>
